<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>被动观察器</title>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>

    <body>
        <h1>被动观察器(不包括视口)</h1>
        <!-- MutationObserver 测试区域 -->
        <div id="mutation-container">
            <button id="add-node">添加子节点</button>
            <button id="change-attr">修改属性</button>
            <div id="target-element" class="observed" data-example="1">目标元素</div>
        </div>

        <!-- ResizeObserver 测试区域 -->
        <div id="resize-container">
            <button id="resize-btn">调整元素大小</button>
            <div id="observed-element"></div>
            <p id="size-info"></p>
        </div>

        <!-- 滚动区域（测试被动事件监听器） -->
        <div id="scroll-area" style="height: 300px; overflow-y: scroll; border: 1px solid #ccc;">
            <div style="height: 800px; padding: 20px;">
                滚动区域（测试被动事件监听器）
            </div>
        </div>


    </body>

</html>